<template>
  <div id="app" class="skBmiCard">
    <template v-if="listShow">
      <a-card :bordered="false" v-if="tableShow">
        <a-row :gutter="[8,16]">
          <a-col>
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
              <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                  <a-col :xl="6" :lg="7" :md="12" :sm="24">
                    <a-form-item label="班级">
                      <j-dict-select-tag type="list"  v-model="queryParam.classId"  
                        dictCode="sk_class,class_name,id,del_flag = 0 order by sort_no asc" placeholder="请选择班级" />
                    </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="12" :sm="24">
                    <a-form-item label="幼儿">
                      <select-student v-model="queryParam.studentId" :classId="queryParam.classId" placeholder="请选择幼儿"></select-student>
                    </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="12" :sm="24">
                    <a-form-item label="测量时间">
                      <a-range-picker 
                        v-model="querySearchDate"
                        valueFormat="YYYY-MM-DD" @change="handelSearchDate" :allowClear="false" style="width: 100%;" />
                    </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="12" :sm="24">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                      <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    </span>
                  </a-col>
                </a-row>
              </a-form>
            </div>
            <!-- 查询区域-END -->
            <!-- 操作按钮区域 -->
            <div class="table-operator">
              <!-- <a-button @click="handleSync" type="primary" icon="sync">同步数据</a-button> -->
              <a-button @click="handleAdd" type="primary" icon="plus" v-has="'health:sk_bmi_record:add'">新增</a-button>
              <a-button type="primary" icon="download" @click="handleExportXls('儿童身高体重测量记录')" v-has="'health:sk_bmi_record:exportXls'">导出</a-button>
              <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" v-has="'health:sk_bmi_record:import'">
                <a-button type="primary" icon="import">导入</a-button>
              </a-upload>
              <!-- 高级查询区域 -->
              <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query> -->
              <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                  <a-menu-item key="1" @click="batchDel" v-has="'health:sk_bmi_record:deleteBatch'"><a-icon type="delete"/>删除</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
              </a-dropdown>
            </div>
            <a-card class="notb">
              <div class="ant-card-head-wrapper">
                <div class="ant-card-head-title">
                  <span class="subtitle" style="margin-bottom: 14px;">数据时间：{{dataDate}}</span>
                </div>
                <div class="ant-card-extra" >
                  <a-button type="primary" @click="handleDetail">查看详情<a-icon type="caret-right" /></a-button>
                </div>
              </div>
              <!-- table区域-begin -->
              <a-table
                ref="table"
                size="middle"
                :scroll="{x:true}"
                bordered
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :loading="loading"
                class="j-table-force-nowrap"
                @change="handleTableChange">

                <template slot="htmlSlot" slot-scope="text">
                  <div v-html="text"></div>
                </template>
                <template slot="imgSlot" slot-scope="text,record">
                  <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                  <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
                </template>
                <template slot="fileSlot" slot-scope="text">
                  <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                  <a-button
                    v-else
                    :ghost="true"
                    type="primary"
                    icon="download"
                    size="small"
                    @click="downloadFile(text)">
                    下载
                  </a-button>
                </template>

                <span slot="action" slot-scope="text, record">
                  <a-space >
                    <a @click="handleView(record)">生长发育报告</a>
                    <a @click="handleEdit(record)" v-has="'health:sk_bmi_record:edit'">编辑</a>
                    <a-dropdown>
                      <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                      <a-menu slot="overlay">
                        <a-menu-item v-has="'health:sk_bmi_record:delete'">
                          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                            <a>删除</a>
                          </a-popconfirm>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a-space>
                </span>
              </a-table>
            </a-card>
          </a-col>
        </a-row>

        <sk-bmi-record-modal ref="modalForm" @ok="modalFormOk" @cardData="cardDataSet"></sk-bmi-record-modal>
      </a-card>
      <sk-student v-else ref="skStudent" :studentInfo="studentInfo" @cardData="cardDataSet"></sk-student>
    </template>
    <sk-bmi-info v-else ref="skBmiInfo" @cardData="cardDataSet"></sk-bmi-info>
  </div>
</template>

<script>

  import "@/assets/less/ClassAndCard.less"
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import SkBmiRecordModal from './modules/SkBmiRecordModal'
  import SelectStudent from '@/components/skComponent/SelectStudent'
  import skStudent from './growth/skStudent'
  import skBmiInfo from './growth/skBmiInfo'
  import { getAction } from '@/api/manage.js'
  import { skClassList } from '@/api/management.js'
  import moment from 'moment'

  export default {
    name: 'SkBmiCard',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      SkBmiRecordModal,
      SelectStudent,
      skStudent,
      skBmiInfo
    },
    data () {
      return {
        description: '身高体重统计',
        listShow: true,
        tableShow: true,
        studentInfo: {
          studentName: '',
          studentId: undefined,
          semesterId: undefined,
        },
        classIndex: 0,
        classList: [{
          classId: null,
          className: '全园'
        }],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'年级',
            align:"center",
            dataIndex: 'classType'
          },
          {
            title:'班级',
            align:"center",
            dataIndex: 'className'
          },
          // {
          //   title:'学期',
          //   align:"center",
          //   dataIndex: 'termId_dictText'
          // },
          {
            title:'测量时间',
            align:"center",
            dataIndex: 'measurementTime'
          },
          {
            title:'幼儿',
            align:"center",
            dataIndex: 'studentId_dictText'
          },
          {
            title:'身高(cm)',
            align:"center",
            dataIndex: 'height'
          },
          {
            title:'体重(kg)',
            align:"center",
            dataIndex: 'weight'
          },
          {
            title:'BMI',
            align:"center",
            dataIndex: 'bmi'
          },
          {
            title:'体型',
            align:"center",
            dataIndex: 'status_dictText'
          },
          {
            title:'身高',
            align:"center",
            dataIndex: 'heightStatus_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/health/skBmiRecord/list",
          delete: "/health/skBmiRecord/delete",
          deleteBatch: "/health/skBmiRecord/deleteBatch",
          exportXlsUrl: "/health/skBmiRecord/exportXls",
          importExcelUrl: "health/skBmiRecord/importExcel",
          sync: "/health/skBmiRecord/synchBmiRecord", //同步
        },
        superFieldList:[],
        initSearchDate: true,
        monthStatus:true
      }
    },
    created() {
      this.getSuperFieldList();
      this.getClassList();
    },
    mounted() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      // 获取参数
      cardDataSet(data){
        this.listShow = data.show;
        if (data.tableShow == false) {
          this.tableShow = false;
        }else{
          if (data.listShow) {
            this.tableShow = true;
            this.classId = "0";
          }else{
            this.tableShow = true;
            this.dateType = data.dateType;
          }
        }
      },
      // 获取所有的班级
      getClassList() {
        this.dataDate = this.$skCommon.getDate(1);
        skClassList()
          .then(res => {
            if (res.success) {
              this.classList = res.result;
              this.classList.unshift({ className: '全园' })
            } else {
              this.$message.warning(res.message)
            }
          })
          .catch(error => {
            console.error(error)
          })
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'studentId',text:'学生ID'})
        fieldList.push({type:'number',value:'height',text:'身高(cm)'})
        fieldList.push({type:'number',value:'weight',text:'体重(kg)'})
        fieldList.push({type:'number',value:'bmi',text:'BMI'})
        fieldList.push({type:'int',value:'status',text:'状态'})
        fieldList.push({type:'date',value:'measurementTime',text:'测量时间'})
        // fieldList.push({type:'string',value:'termId',text:'学期ID'})
        fieldList.push({type:'int',value:'delFlag',text:'删除状态'})
        this.superFieldList = fieldList
      },
      handleSearch(i) {
        this.classIndex = i;

        const classId = this.classList[i].id;
        if(classId) {
          this.queryParam.classId = classId;
        } else {
          this.queryParam.classId = undefined;
        }
        this.searchQuery();
      },
      handleView(record) {
        this.studentInfo.studentName = record.studentId_dictText
        this.studentInfo.studentId = record.studentId
        this.studentInfo.semesterId = record.termId
        this.listShow = true;
        this.tableShow = false;
      },
      handleDetail() {
        this.listShow = false;
        this.tableShow = false;
        // this.$router.push({ path: '/health/growth/skBmiInfo' });
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '~@assets/less/common.less';
  @import '~@assets/less/skReport.less';

</style>